<template>
  <div class="statisticalTable">
    <el-card shadow="never">
      <div slot="header" class="header-flex">
        <span class="card-title">统计表</span>
        <el-button size="small">导出统计表</el-button>
      </div>
      <el-table
          size="small"
          stripe
          :data="tableData"
          style="width: 100%">
        <el-table-column
            align="center"
            prop="name"
            label="区划代码">
        </el-table-column>
        <el-table-column
            align="center"
            prop="date"
            label="区划名称">
        </el-table-column>
        <el-table-column
            align="center"
            prop="address"
            label="县级单位(个)">
        </el-table-column>
        <el-table-column
            align="center"
            prop="addres1"
            label="行政区划上报(个)">
        </el-table-column>
        <el-table-column
            align="center"
            prop="addres2"
            label="市级审核(个)">
        </el-table-column>
        <el-table-column
            align="center"
            prop="addres3"
            label="省级审核(个)">
        </el-table-column>
        <el-table-column
            align="center"
            prop="addres4"
            label="省级审核进度(%)">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';

@Component
export default class StatisticalTable extends Vue {
  private tableData = [
    {
      date: '呼和浩特市',
      name: '1501',
      address: '14',
      addres1: '14',
      addres2: '14',
      addres3: '14',
      addres4: '100'
    },
    {
      date: '新城区',
      name: '1502',
      address: '1',
      addres1: '1',
      addres2: '1',
      addres3: '1',
      addres4: '100'
    },
    {
      date: '赛罕区',
      name: '1503',
      address: '1',
      addres1: '1',
      addres2: '1',
      addres3: '1',
      addres4: '100'
    }
  ]
}
</script>
<style lang="scss" scoped>
.statisticalTable {
  .header-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
